<template>
    <div>
        <BreadCrumb name1="用户管理" name2="用户列表"></BreadCrumb>
        <el-card class="box-card">
            <el-row>
                <el-col :span="8">
                    <el-input placeholder="请输入内容" v-model="info.query" :clearable="true" @clear="getUsersData" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search" @click="getUsersData"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="isDialogVisible=true">添加用户</el-button>
                </el-col>
            </el-row>
            <el-table :data="users" border style="width: 100%;margin:10px 0">
                <!-- type对应列的类型 -->
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="username" label="用户名"></el-table-column>
                <el-table-column prop="email" label="邮箱"></el-table-column>
                <el-table-column prop="mobile" label="电话"></el-table-column>
                <el-table-column prop="role_name" label="角色"></el-table-column>
                <el-table-column prop="mg_state" label="状态">
                    <template slot-scope="scoped">
                        <el-switch v-model="scoped.row.mg_state" @change="UsersStateChange(scoped.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="mg_state" label="操作" width="200">
                    <template slot-scope="scoped">
                        <el-tooltip class="item" effect="dark" content="修改成员" placement="top">
                            <el-button type="primary" icon="el-icon-edit" circle @click="modifyUserInfo(scoped.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除成员" placement="top">
                            <el-button type="danger" icon="el-icon-delete" circle @click="deleteUserInfo(scoped.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="权限设置" placement="top">
                            <el-button type="warning" icon="el-icon-setting" circle></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="info.pagenum" :page-sizes="[1,2,4,8]" :page-size="info.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
            <!-- 
                page-sizes:每页显示个数选择器的选项设置
                page-size:每页显示条目个数，支持 .sync 修饰符
                current-page:当前页数，支持 .sync 修饰符
                total:总条目数
                size-change:pageSize 改变时会触发
                current-change:currentPage 改变时会触发
            -->
            <el-dialog title="添加用户" :visible.sync="isDialogVisible" width="30%">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="ruleForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="ruleForm.password"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="ruleForm.email"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="mobile">
                        <el-input v-model="ruleForm.mobile"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="isDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="sendUserInfo" >确 定</el-button>
                </span>
            </el-dialog>
            <el-dialog title="修改用户信息" :visible.sync="dialogVisible" width="30%">
                <el-form ref="modifyForm" :model="modifyUserForm" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input disabled v-model="modifyUserForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email" :rules="rules.email">
                        <el-input v-model="modifyUserForm.email"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="mobile" :rules="rules.mobile">
                        <el-input v-model="modifyUserForm.mobile"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateUserInfo">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import BreadCrumb from '@/components/BreadCrumb';//引入面包屑组件
import {Users_List,Update_UsersState,Users_infoSend,Get_USerInfo,Modify_UserInfo,Delete_UserInfo} from '@/api/users.js';//引入发送请求需要的接口
    export default {
        data(){
            let EmailCheck = (rule,value,callback)=>{
                const emailRegexp = /^\w+@\w+(\.\w+)+$/ //^表示以什么开头 \w表示字母数字下划线 +表示最少一个 \.表示. $表示以什么结尾
                if(emailRegexp.test(value)){//.test为正则方法 测试是否符合正则 返回布尔值
                    return callback()//如果符合 返回callback回调函数
                }
                return callback(new Error('请输入合法邮箱'))//否则 返回callback回调函数 里面传一个Error对象
            }
            let MobileCheck = (rule,value,callback)=>{
                const mobileRegexp = /^1[3456789]\d{9}$/ //^表示以什么开头 [3456789]表示第二位的取值 \d表示数字 {9}表示出现9次 $以什么结尾
                if(mobileRegexp.test(value)){//.test为正则方法 测试是否符合正则 返回布尔值
                    return callback()//如果符合 返回callback回调函数
                }
                return callback(new Error('请输入合法电话'))//否则 返回callback回调函数 里面传一个Error对象
            }
            return{
                info:{},//存储发送请求的参数
                users:[],//存储请求回来的用户信息
                total:0,//存储请求回来的数据总数量
                isDialogVisible:false,//控制添加用户时对话框的显示与隐藏
                dialogVisible:false,//控制修改用户时对话框的显示与隐藏
                modifyUserForm:{},//修改用户信息用的数据
                ruleForm:{//添加用户信息的参数
                    username:'',
                    password:'',
                    email:'',
                    mobile:''
                },
                rules:{//form表单的校验规则
                    username:[//用户名
                        { required: true, message: '请输入用户名', trigger: 'blur' },//required是否必传 message设置提示 trigger：blur当失去焦点执行
                        { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }//min最小长度 max最大长度 message设置提示 trigger：blur当失去焦点执行
                    ],
                    password:[//密码
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
                    ],
                    email:[//邮箱
                        {validator:EmailCheck,trigger:'blur'}//validator自定义正则 EmailCheck为自定义正则名 trigger：blur当失去焦点执行
                    ],
                    mobile:[//电话
                        {validator:MobileCheck,trigger:'blur'}//validator自定义正则 MobileCheck为自定义正则名 trigger：blur当失去焦点执行
                    ]
                }
            }
        },
        created(){
            const userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'));//在sessionStorage中查询
            if(userInfo){//如果查询到了
                this.info = userInfo;//将查询到的数据赋值给data中的初始值
            }else{//如果没查询到
                this.info = {//声明data中的info数据为
                    query:'',//input框绑定的初始值
                    pagenum:1,//请求页数
                    pagesize:2//请求数据数量
                }
            }

        },
        components:{
            BreadCrumb//注册面包屑导航
        },
        methods:{
            async getUsersData(){//发送请求数据的方法
                const result = await Users_List({
                    method:'get',//请求方式
                    url:'users',//请求路径
                    params:this.info//请求参数
                })
                if(result.meta.status == 200){//如果请求成功
                    this.users = result.data.users;//赋值给初始值
                    this.total = result.data.total;//赋值给初始值
                }
                console.log(result);
                console.log(this.users);
                console.log(this.total);
            },
            // 改变每页几条数据时触发 并且handleCurrentChange也会触发
            handleSizeChange(newSize){//newSize为每页展示几条数据
                console.log(newSize);
                this.info.pagesize = newSize;//改变时赋值给发送数据用的参数
                window.sessionStorage.setItem('userInfo',JSON.stringify(this.info));//当改变每页几条数据时 将新的数据存储到sessionStorage中
                this.getUsersData();//执行发送请求的方法
            },
             // 当前页码改变触发 只有自己触发
            handleCurrentChange(newNum){//newNum为页码
                console.log(newNum);
                this.info.pagenum = newNum;//改变时赋值给发送数据用的参数
                window.sessionStorage.setItem('userInfo',JSON.stringify(this.info));//当改变页码时 将新的数据存储到sessionStorage中
                this.getUsersData();//执行发送请求的方法
            },
            // 改变成员状态
            async UsersStateChange(scoped){//scoped为slot-scope接收过来的子组件数据 scoped为当前行的数据
                console.log(scoped);
                const result = await Update_UsersState({//发送更改数据的请求
                    method:'put',//请求方式
                    url:`users/${scoped.id}/state/${scoped.mg_state}`//请求路径 ``拼串处理
                })
                console.log(result);
                if(result.meta.status == 200){//如果请求成功
                    return this.$message({//设置一条成功提示框
                        message: '修改成功',
                        type: 'success'
                    });
                }else{//如果请求失败
                    scoped.mg_state = !scoped.mg_state;//将mg_state的值取反操作
                    return this.$message({//设置一条提示框
                        message:'修改失败',
                        type:'error'
                    })
                }
            },
            // 提交成员信息
            sendUserInfo(){
                console.log(this.ruleForm);
                this.$refs.ruleForm.validate(async (valid)=>{
                    console.log(valid);
                    if(valid){
                        const result = await Users_infoSend({
                            method:'post',
                            url:'users',
                            data:this.ruleForm
                        })
                        console.log(result);
                        if(result.meta.status != 201){
                            return this.$message.error('提交失败 请重新填写')
                        }
                        this.$message.success('提交成功');
                        this.isDialogVisible = false;
                        this.$refs.ruleForm.resetFields();
                        this.getUsersData();
                    }else{
                        this.$message({
                            message:'提交失败 请重新填写',
                            type:'error'
                        })
                        this.$refs.ruleForm.resetFields();
                    }
                })
            },
            // 当点击修改成员信息时发送的get请求
            async modifyUserInfo(info){
                console.log(info);
                const result = await Get_USerInfo({//获取某个成员的信息
                    method:'get',//请求方式为get
                    url:`users/${info.id}`//路径为模板字符串拼串id
                })
                console.log(result);
                if(result.meta.status != 200){//如果状态码不为200
                    return this.$message({//返回错误提示框
                        message:'未查到该数据',
                        type:'error'
                    })
                }
                this.modifyUserForm = result.data;//将获取到的数据赋值给初始值
                this.dialogVisible=true;//当前对话框显示
            },
            // 修改成员发送的put请求
            updateUserInfo(){
                this.$refs.modifyForm.validate(async (valid)=>{//获取到当前的form元素 validate可以检测当前校验结果 回调函数有一个参数 接收布尔值
                    if(!valid){//如果为false
                        return this.message.error('错误格式 请修改')//弹出错误提示框  并且return不执行下面代码
                    }
                    const result = await Modify_UserInfo({//如果为true 发送更改成员的请求
                        method:'put',//请求方式为put
                        url:`users/${this.modifyUserForm.id}`,//路径为模板字符串拼串处理 id
                        data:this.modifyUserForm//put请求的参数必须放到data中 params中不可以
                    })
                    console.log(result);
                    this.dialogVisible=false;//让当前对话框隐藏
                    this.getUsersData();//执行获取全部数据请求
                    return this.$message({//返回成功提示框
                        message:'修改成功',
                        type:'success'
                    })
                })
            },
            // 删除成员信息发送的delete请求
            async deleteUserInfo(info){
                console.log(info);
                const comfirmResult = await this.$confirm('此操作将永久删除该用户信息, 是否继续?', '提示', {//点击时弹出确认框
                    confirmButtonText: '确定',//确定框按钮文字
                    cancelButtonText: '取消',//取消框按钮文字
                    type: 'warning'//类型为警告
                })
                .catch(err=>err)//获取错误
                console.log(comfirmResult);//值为 确定：confirm 取消：cancel
                if(comfirmResult == 'confirm'){//判断值为confirm时发送删除请求
                    const result = await Delete_UserInfo({
                        method:'delete',//请求方式为delete
                        url:`users/${info.id}`//路径为模板字符串拼串id
                    })
                    console.log(result);
                    if(result.meta.status != 200){//如果状态码不为200
                        return this.$message.error('删除失败')//返回错误提示框
                    }
                    this.$message.success('删除成功');//否则显示成功提示框
                    this.getUsersData();//继续执行获取全部用户信息数据的请求
                }
            }
        },
        mounted(){
            this.getUsersData();//挂载后执行请求数据的方法
        }
    }
</script>

<style lang="scss" scoped>

</style>